Para testar esta funcionalidade digite um cep válido na caixa superior esquerda e a seguir clique com o mouse em outra caixa qualquer. Ao perder o foco será feito o processo.

---

Esta app solicita o usuário o CEP e quando o campo CEP perder o foco faz a pesquisa.
Vá no google e pesquise por 'api cep' que foi assim que achamos a viacep.
O CEP : 01310-200 é o cep do MASP e os dados abaixo são do museu:
   Avenida Paulista, 1578
   Bela Vista
   São Paulo
   SP
Se você abrir o browser com uma requisição tipica obterá os dados de cep:
   http://viacep.com.br/ws/01310-200/json/
   e obterá os seguintes dados:

			{
			  "cep": "01310-200",
			  "logradouro": "Avenida Paulista",
			  "complemento": "de 1512 a 2132 - lado par",
			  "bairro": "Bela Vista",
			  "localidade": "São Paulo",
			  "uf": "SP",
			  "unidade": "",
			  "ibge": "3550308",
			  "gia": "1004"
			}
		

---

Código:

    <script>
        function getDadosEnderecoCEP(cep) {
            //console.log(cep);    //cep recebido por padrão
            var x;
            x = cep.replace("-", "")
            let url = 'http://viacep.com.br/ws/' + x + '/json/'
            //console.log(url);        //url da api

            let req = new XMLHttpRequest();
            req.open('GET', url);

            req.onreadystatechange = () => {
                if (req.readyState == 4 && req.status == 200) {    //4=solicitação terminada e 200 = com sucesso
                    //console.log(req.responseText);        //resposta do servidor
                    let resreq = req.responseText;
                    let objdadosreq = JSON.parse(resreq);

                    // console.log(objdadosreq);                //todos os campos
                    //console.log(objdadosreq.logradouro);    //um campo

                    document.getElementById('endereco').value = objdadosreq.logradouro;
                    document.getElementById('complemento').value = objdadosreq.complemento;
                    document.getElementById('bairro').value = objdadosreq.bairro;
                    document.getElementById('cidade').value = objdadosreq.localidade;
                    document.getElementById('uf').value = objdadosreq.uf;


                }
            }

            req.send();
        }
    </script>

        <div class="row form-group">
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="CEP" onblur="getDadosEnderecoCEP(this.value)" />
            </div>
            <div class="col-sm-9">
                <input type="text" class="form-control" placeholder="Endereço" readonly id="endereco" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-sm-12">
                <input type="text" class="form-control" placeholder="Complemento" readonly id="complemento" />
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="Bairro" readonly id="bairro" />
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control" placeholder="Cidade" readonly id="cidade" />
            </div>

            <div class="col-sm-2">
                <input type="text" class="form-control" placeholder="UF" readonly id="uf" />
            </div>
        </div>